<template>
  <view class="share-wrap">
    <!-- 分享弹窗 -->
    <Popup ref="share" type="bottom" @close="closeShare">
      <view
        :class="['share', { iphonex: isIphoneX }]"
        :style="{ 'background-color': backgroundColor, color: textColor }"
      >
        <text class="share__title">分享到</text>
        <view class="share__content">
          <button
            v-for="item in buttons"
            :key="item.name"
            :class="{
              'share__content-box': true,
              'js-copy': item.name === 'copy',
            }"
            :data-clipboard-text="item.name === 'copy' ? copyText : null"
            @click="handleClick(item)"
            :open-type="item.type || ''"
          >
            <text
              :class="['iconfont', item.icon]"
              :style="{ color: item.color }"
            />
            <text class="share__content-text" :style="{ color: textColor }">
              {{ item.text }}
            </text>
          </button>
        </view>
        <text
          class="share__btn"
          :style="{ 'border-top-color': splitLineColor, color: textColor }"
          @click="closeShare"
        >
          取消分享
        </text>
      </view>
    </Popup>
    <!-- 海报弹窗 -->
    <Popup ref="poster" type="center">
      <view class="poster">
        <text class="iconfont icon-circle-close2" @click="handlePosterClose" />
        <image class="poster__img" :src="posterImage" />
        <view class="poster__des">长按图片保存</view>
      </view>
    </Popup>
  </view>
</template>

<script>
import Popup from './Popup';
import { isIphoneX } from '../utils';

const OPTIONS = {
  wechat: {
    name: 'wechat',
    text: '分享到微信',
    icon: 'icon-share-weixin',
    color: '#26b605',
    type: 'share',
  },
  poster: {
    name: 'poster',
    text: '生成海报',
    icon: 'icon-share-poster',
    color: '#07d1aa',
  },
  copy: {
    name: 'copy',
    text: '复制分享链接',
    icon: 'icon-share-link',
    color: '#1396db',
  },
};

export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },

    options: {
      type: Array,
      default: () => ['wechat', 'poster', 'copy'],
    },

    copyText: String,

    posterUrl: {
      type: String,
    },

    backgroundColor: {
      type: String,
      default: '#fff',
    },

    splitLineColor: {
      type: String,
      default: '#f5f5f5',
    },

    textColor: {
      type: String,
      default: '#303133',
    },

    useCloseFunc: Boolean, // 是否使用@close 回调关闭事件
  },

  components: {
    Popup,
  },

  data() {
    return {
      posterImage:
        'https://picture-1256514897.file.myqcloud.com/book/codes/poster-example.png',
      isIphoneX: isIphoneX(),
    };
  },

  computed: {
    buttons() {
      return this.options.map((item) => OPTIONS[item]);
    },
  },

  watch: {
    show(newValue) {
      if (newValue) {
        this.$refs.share && this.$refs.share.open();
      } else {
        this.$refs.share && this.$refs.share.close();
      }
    },
  },

  methods: {
    handleClick(item) {
      switch (item.name) {
        case 'wechat':
          this.closeShare();
          // #ifdef H5
          uni.setClipboardData({
            data: this.copyText,
            success: () => {
              uni.showToast({ title: '复制分享链接成功', icon: 'none' });
            },
          });
          // this.$toast('请点击浏览器右上角分享');
          // #endif
          break;
        case 'poster':
          this.fetchPoster();
          break;
        case 'copy':
          uni.setClipboardData({
            data: this.copyText,
            success: () => {
              uni.showToast({ title: '复制分享链接成功', icon: 'none' });
            },
          });
          this.closeShare();
          break;
        default:
          break;
      }
    },

    closeShare() {
      if (this.useCloseFunc) {
        this.$emit('close');
      } else {
        this.$emit('update:show', false);
      }
    },

    fetchPoster() {
      this.closeShare();
      this.$http({
        method: 'GET',
        url: this.posterUrl,
        needAuth: true,
        skipToast: false,
        showLoading: true,
        loadingText: '正在生成海报',
      }).then((res) => {
        if (res.ok && res.data) {
          this.posterImage = res.data;
          this.$refs.poster && this.$refs.poster.open();
        }
      });
    },

    handlePosterClose() {
      this.$refs.poster && this.$refs.poster.close();
    },
  },
};
</script>

<style lang="scss">
/* 底部分享 */
.share {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;

  &.iphonex {
    padding-bottom: 68rpx;
  }

  &__title {
    line-height: 60rpx;
    font-size: 24rpx;
    padding: 15rpx 0;
    text-align: center;
  }

  &__content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 15px;

    &-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 200rpx;
      height: auto;
      background: none;
      border: none;
      overflow: inherit;
      margin: 0;
      padding: 0;

      &::after {
        display: none;
      }

      .iconfont {
        font-size: 88rpx;
      }
    }

    &-text {
      font-size: 26rpx;
      padding-top: 5px;
      padding-bottom: 10px;
    }
  }

  &__btn {
    height: 90rpx;
    line-height: 90rpx;
    font-size: 14px;
    border-top-color: #f5f5f5;
    border-top-width: 1px;
    border-top-style: solid;
    text-align: center;
  }
}

.poster {
  width: 604rpx;
  margin: 0 auto;
  text-align: center;
  position: relative;
  border-radius: 8px;

  &__img {
    width: 100%;
    height: 916rpx;
    border-radius: 8px;
    overflow: hidden;
  }

  .iconfont {
    position: absolute;
    z-index: 999;
    top: -114rpx;
    right: -20rpx;
    padding: 20rpx;
    font-size: 48rpx;
    color: #fff;
  }

  &__des {
    position: absolute;
    z-index: 999;
    bottom: -112rpx;
    left: 50%;
    margin-left: -110rpx;
    display: inline-block;
    width: 220rpx;
    height: 72rpx;
    line-height: 72rpx;
    border-radius: 36rpx;
    border: 2rpx solid #fff;
    font-size: 28rpx;
    color: #fff;
    margin-top: 40rpx;
  }
}
</style>
